<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>商家登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Zhou Feng <a4435351@126.com>">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<style>
body {
	font-family: 'microsoft yahei';
	font-size: 16px;
	min-width: 1024px;
}

.logo {
	height: 100px;
}

.menu li {
	width: 150px;
	text-align: center;
	padding: 0;
	'
}

.help-block {
	color: #f00;
	display: none;
}

.rooms {
	background-color: #F4F4F4;
}
</style>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

.container {
	background: #fff;
}

.loginBox {
	width: 420px;
	height: 270px;
	padding: 0 20px;
	border: 1px solid #fff;
	color: #000;
	margin-top: 40px;
	border-radius: 8px;
	background: white;
	box-shadow: 0 0 15px #222;
	background: -moz-linear-gradient(top, #fff, #efefef 8%);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6),
		to(#f4f4f4));
	font: 11px/1.5em 'Microsoft YaHei';
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -210px;
	margin-top: -115px;
}

.loginBox h2 {
	height: 45px;
	font-size: 20px;
	font-weight: normal;
}

.loginBox .left {
	border-right: 1px solid #ccc;
	height: 100%;
	padding-right: 20px;
}

.span7 {
	float: left;
	width: 60%;
}

.span5 {
	float: left;
	width: 30%;
	margin-left: 20px;
}
.requied{
	color: red;
}
.container{
width: 1024px;
}

#myConfirmdialog{color:red;}
</style>
</head>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<!-- <link class="bootstrap library" rel="stylesheet" type="text/css" href="${base}/plugins/bootstrap/css/bootstrap.min.css"> -->
<link type="text/css" rel="stylesheet" href="${base}/plugins/formValidator4.0.1/style/validatorTidyMode.css" />
<link id="bootstrapCss" rel="stylesheet" href="${base}/plugins/zui/css/zui.css" />
<script class="bootstrap library" src="${base}/plugins/jquery.js" type="text/javascript"></script>

</head>
<body>
	<div class="container">
		<% layout("/common/header.html"){} %>
		<div class="jumbotron">
		<div class="btn-group">
	      <button type="button" class="btn btn-lg"  id="addinfobtn">添加</button>
	    </div>
		
		
		
		<table class="table table-bordered table-striped" id="datatable">
        <thead>
          <tr>
            <th class='text-center'>设备编号</th>
            <th >设备名称</th>
            <th >设备地址</th>
            <th >操作</th>
          </tr>
        </thead>
        <tbody id="showdeviceinfo">
        </tbody>
      </table>
		
		
		
		
			
			
				
			</div>
		</div>

			<div class="modal fade" id="myLgModal">
			 <div class="modal-dialog modal-lg">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
			        <h4 class="modal-title">设备信息</h4>
			      </div>
			      	<div class="modal-body">
			      	
			      	
			      	<form class="form-horizontal" role="form" action="" id="registerform">
			      	<input type="hidden" name="iseditorupdate" id="iseditorupdate"  value="add" />
					<h4 class="text-center">
						请填入您的信息(带<span class="requied">*</span>为必填项)
					</h4>
					
					<div class="form-group has-feedback">
						<label for="ip-pwd2" class="col-xs-3 col-sm-3 col-md-3 control-label">机器编号<span class="requied">*</span></label>
						<div class="col-xs-8 col-sm-8 col-md-8">
							<input type="text" class="form-control" maxlength="8" id="deviceid"  name="userDeviceModel.deviceid" placeholder="输入机器编号" >
						</div>
					</div>

					<div class="form-group has-feedback">
						<label for="ip-phone" class="col-xs-3 col-sm-3 col-md-3 control-label">机器名称<span class="requied">*</span></label>
						<div class="col-xs-8 col-sm-8 col-md-8">
							<input type="text" class="form-control" maxlength="20" id="devicename" name="userDeviceModel.devicename"  placeholder="输入机器名称">
						</div>
					</div>
					
					<div class="form-group has-feedback">
						<label class="col-xs-3 col-sm-3 col-md-3 control-label">地区<span class="requied">*</span></label>

						<div class="col-sm-3 col-xs-3 col-md-3 form-group">
							<div class="col-xs-8 col-sm-8 col-md-8">
								<select class="form-control" id="Select1" name="userDeviceModel.province" >
								</select>
							</div>
							<label for="ip-pwd" class="col-xs-1 col-sm-1 col-md-1 control-label">省<span class="requied"></span></label>
						</div>
						<div class="col-sm-3 col-xs-3 col-md-3">
							<div class="col-xs-8 col-sm-8 col-md-8">
								<select class="form-control" id="Select2" name="userDeviceModel.city">
								</select>
							</div>
							<label for="ip-pwd" class="col-xs-1 col-sm-1 col-md-1 control-label">市<span class="requied"></span></label>
						</div>
						<div class="col-sm-3 col-xs-3 col-md-3">
							<div class="col-xs-8 col-sm-8 col-md-8">
								<select class="form-control" id="Select3"  name="userDeviceModel.distinguish">
								</select>
							</div>
							<label for="ip-pwd" class="col-xs-1 col-sm-1 col-md-1 control-label">区<span class="requied"></span></label>
						</div>
					</div>

					
					
					<div class="form-group">
						<div class="col-xs-offset-3 col-md-offset-3 col-xs-2">
							<a type="button" class="btn btn-primary" href="javascript:register();" style="width: 120px;">提交</a>
						</div>
					</div>
				</form>
			      	
			      	

					</div>
			    </div>
			  </div>
			  
			  	</div>
			  	
			  	<div class="modal fade" id="myConfirmdialog">
				  <div class="modal-dialog">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
				        <h4 class="modal-title">请确认！！</h4>
				      </div>
				      <div class="modal-body">
				        <h4>确定删除编号为《<b id="myid"></b>》的机器吗？</h4>
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				        <button type="button" class="btn btn-primary" id="comfirmDelbtn">确定</button>
				      </div>
				    </div>
				  </div>
				</div>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script id="jquery" type="text/javascript" src="${base}/plugins/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script id="bootstrapJs" type="text/javascript" src="${base}/plugins/zui/js/zui.js"></script>
<script type="text/javascript" src="${base}/plugins/loadScripts.js"></script>
<script type="text/javascript" src="${base}/plugins/loadArea.js"></script>
<script type="text/javascript" src="${base}/plugins/nova.js"></script>
<script type="text/javascript" src="${base}/plugins/jsAddress.js"></script>

<script src="${base}/plugins/formValidator4.0.1/formValidator-4.0.1.js" type="text/javascript"></script>
<script src="${base}/plugins/formValidator4.0.1/formValidatorRegex.js" type="text/javascript"></script>
<script type="text/javascript" src="${base}/plugins/handlebars.js"></script>

<script id="datalist"  type="text/x-handlebars-template">
{{#each this}}
  <tr>
    <td>{{id}}</td>
    <td>{{devicename}}</td>
    <td>{{detailaddress}}</td>
    <td><a href="javascript:updatainfo('{{deviceid}}','{{devicename}}','{{province}}','{{city}}','{{distinguish}}')"><i class="icon-edit"></i></a> &nbsp; <a href="javascript:delinfo('{{deviceid}}')" class="text-danger"><i class="icon-trash"></i></a></td>
  </tr> 
{{/each}}
</script>

<script type="text/javascript">
	$(function(e) {
		 $.ajax({
			 url:'${base}/getDeviceInfo',
			 type:'post',
			 dataType:'json',
			 success:function(data){
				 var myTemplate = Handlebars.compile($("#datalist").html());
				 $('#showdeviceinfo').html(myTemplate(data));
				 $('#datatable').datatable({fixedHeaderOffset: 0, checkable: false});
			 }
		 });
		 
		 
		 
		 $("#addinfobtn").click(function(e){
			 addressInit('Select1', 'Select2', 'Select3');
			 $("#deviceid").attr('readOnly',false);
			 $("#iseditorupdate").val("add");
			 $('#myLgModal').modal();
		 });
		 
		$.formValidator.initConfig({
			formID : "registerform",
			autoTip : true,
			tidyMode : true,
			onError : function(a, b, c) {
				var msg = new $.Messager(a, {
					type : 'warning',
					placement : 'bottom'
				});
				msg.show();
				$(b).focus();

				$("#configureformdiv").css('transform', 'rotate(5deg)');
				setTimeout(function() {
					$("#configureformdiv").css('transform', 'rotate(-5deg)')
				}, 250)
				setTimeout(function() {
					$("#configureformdiv").css('transform', 'rotate(0deg)')
				}, 500)

			}
		});

		$("#deviceid").formValidator({onShow : "请输入设备编号",onFocus : "请输入设备编号",onCorrect : "恭喜你,你输对了"}).
		//inputValidator({min:1,max:6,onError:"设备ID必须是6位字母或数字"}).
		functionValidator({fun : function(v){return (v <= 16777215 && v > 0);},validateType:"FunctionValidator",  onError : "设备ID在0到16777215之间"});
		$("#devicename").formValidator({onShow:"请输入设备名称",onFocus:"请输入设备名称，最短2位，最长20位",onCorrect:"恭喜你,输入正确"}).inputValidator({min:2,max:20,onError:"设备名称不能为空，长度必须大于2小于20"});
		
		
		$("#comfirmDelbtn").click(function(e){
			var id = $("#myid").text();
			$.ajax({
				url : "${base}/deleteUserDeviceInfo",
				dataType : 'json',
				data :'userDeviceModel.deviceid=' + id,
				type : 'post',
				success : function(data) {
					if(data.flag){
						var msg = new $.Messager(data.msg,{type:'success',placement:'bottom'});
				       	msg.show();
				       	setTimeout(reloadpage, 500);
					}else{
						var msg = new $.Messager(data.msg,{type:'warning',placement:'bottom'});
				       	msg.show();
					}
					
				}
			});
		});
		
	});
	

	function register() {
		var flag = $.formValidator.pageIsValid();
		if(flag){
			$.ajax({
				url : "${base}/updateUserDeviceInfo",
				dataType : 'json',
				data : $("#registerform").serialize(),
				type : 'post',
				success : function(data) {
					if(data.flag){
						var msg = new $.Messager(data.msg,{type:'success',placement:'bottom'});
				       	msg.show();
				       	setTimeout(reloadpage, 500);
					}else{
						var msg = new $.Messager(data.msg,{type:'warning',placement:'bottom'});
				       	msg.show();
					}
				}
			});
		}
		
		
		
	}
	
	
	function updatainfo(id,name,province,city,distinguish){
		 addressInit('Select1', 'Select2', 'Select3',province,city,distinguish);
		 $("#deviceid").attr('readOnly',true);
		 $("#iseditorupdate").val("update");
		 $("#deviceid").val(id);
		 $("#devicename").val(name);
		 $('#myLgModal').modal();
	}
	function delinfo(id){
		$("#myid").text(id);
		$('#myConfirmdialog').modal();
		return false;
		var flag = confirm("确定删除《"+ id +"》吗");
		if(flag){
			$.ajax({
				url : "${base}/deleteUserDeviceInfo",
				dataType : 'json',
				data :'userDeviceModel.deviceid=' + id,
				type : 'post',
				success : function(data) {
					if(data.flag){
						var msg = new $.Messager(data.msg,{type:'success',placement:'bottom'});
				       	msg.show();
				       	setTimeout(reloadpage, 500);
					}else{
						var msg = new $.Messager(data.msg,{type:'warning',placement:'bottom'});
				       	msg.show();
					}
					
				}
			});
		}
	}
	
	function reloadpage(){
		window.location.reload();
	}
	
	
</script>

</html>
